<template>
  <div class="finance-layout">
    <van-nav-bar
      :title="pageTitle"
      left-arrow
      @click-left="onBack"
      fixed
      placeholder
    >
      <template #right>
        <van-icon name="search" size="18" @click="onSearch" v-if="showSearch" />
      </template>
    </van-nav-bar>
    
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    
    <van-tabbar v-model="activeTabbar" route>
      <van-tabbar-item name="home" icon="home-o" to="/new/home">首页</van-tabbar-item>
      <van-tabbar-item name="apps" icon="apps-o" to="/new/apps">应用</van-tabbar-item>
      <van-tabbar-item name="profile" icon="user-o" to="/new/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NavBar, Icon, Tabbar, TabbarItem } from 'vant'

export default {
  name: 'MobileFinanceLayout',
  components: {
    vanNavBar: NavBar,
    vanIcon: Icon,
    vanTabbar: Tabbar,
    vanTabbarItem: TabbarItem
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const activeTabbar = ref('apps')
    
    // 获取当前页面标题
    const pageTitle = computed(() => {
      return route.meta.title || '财务管理'
    })
    
    // 确定是否显示搜索图标
    const showSearch = computed(() => {
      return ['mobileFinanceExpense', 'mobileFinanceInvoice', 'mobileFinanceSalary'].includes(route.name)
    })
    
    // 返回上一页
    const onBack = () => {
      router.back()
    }
    
    // 跳转到搜索页面
    const onSearch = () => {
      router.push({
        path: '/search',
        query: { 
          source: route.name,
          module: 'finance'
        }
      })
    }
    
    return {
      activeTabbar,
      pageTitle,
      showSearch,
      onBack,
      onSearch
    }
  }
}
</script>

<style scoped>
.finance-layout {
  min-height: 100vh;
  padding-bottom: 50px;
  background-color: #f7f8fa;
}
</style> 